<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>passenger</title>

    <link  href="../static/bootstrap-3.3.7/css/bootstrap.min.css" th:href="@{bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <script src="../static/bootstrap-3.3.7/js/jquery-1.11.3.min.js" th:src="@{bootstrap-3.3.7/js/jquery-1.11.3.min.js}"  type="text/javascript"></script>
    <script src="../static/bootstrap-3.3.7/js/bootstrap.min.js" th:src="@{bootstrap-3.3.7/js/bootstrap.min.js}" type="text/javascript"></script>
    <script src="../static/My97DatePicker/WdatePicker.js" th:src="@{My97DatePicker/WdatePicker.js}" type="text/javascript" ></script>

    <style type="text/css">
        body{
            background-color: #f1f2f6;
        }

        .foot{
            position:relative;
            bottom:0;
            height: 100px;
            margin-top: 50px;
            padding-top: 30px;
            width: 100%;
            text-align:center;
            background-color: white;
            font-size: 12px;
        }

        .glyphicon-user{
            color:coral;
            font-size:20px;
        }

        .fcolor{
            color: white;
            font-size:20px;
        }

        input{
             border-bottom: 1px solid #dbdbdb;
             border-top:0px;
             border-left:0px;
             border-right:0px;
         }

        select{
            width: 100px;
            border-bottom: 1px solid #dbdbdb;
            border-top:0px;
            border-left:0px;
            border-right:0px;
        }

    </style>
</head>
<body>
<!--  	描述：导航条    -->
<nav class="navbar navbar-default" role="navigation" style="background-color: #ffffff; height: 80px;margin-bottom: 10px">
    <div class="container">
        <div class="row">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <i style="display: inline-block;background-color: #5cb85c; width: 150px;height:50px; background: url(../static/img/bg/piaodekuai.png) no-repeat center; background-size: 100px 50px; "></i>
                    <!-- <span style="color:#0652DD; font-size:30px;width: 30px;">飘得快</span>-->
                </a>
            </div>
            <div class="nav navbar-nav" style="width: 70%;padding-top: 30px;padding-left: 110px">

                    <span style="color: #ffa801;float: left">乘机信息&nbsp;</span>
                    <div style="float: left;border-bottom: 1px solid #dbdbdb;width: 32%;margin-top: 10px;"></div>
                    <span style="color: #747d8c;float: left">&nbsp;支付&nbsp;</span>
                    <div style="float: left;border-bottom: 1px solid #dbdbdb;width: 32%;margin-top: 10px;"></div>
                    <span style="color: #747d8c;float: left">&nbsp;完成</span>

            </div>
            <div class="nav navbar-nav navbar-right" style="padding-top: 25px;margin-right: 0px">
                <a href="/customerCenter">
                    <span class="fcolor glyphicon glyphicon-user" style="color: #6A6AFF;font-size: 20px"></span>
                    <span style="color: #1e272e;font-size: 15px" >你好,李白</span>
                </a>
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div style="width: 100%; height: 60px;padding-top: 10px; padding-left:20px; background-color:#ffeaa7;
                    -moz-box-shadow: 0px 1px 2px  #909090;-webkit-box-shadow: 0px 1px 2px  #909090;">
                    <span>您预订的产品不可使用港澳通行证预订。</span><br>
                    <span>该航班预计在扣款成功后80分钟内完成出票，保障出行。</span>
                </div>
            </div>
            <div class="row">
            <div>
                <h3>乘客</h3>
            </div>
        </div>
            <form>
                <div class="row" style="background-color:#ffffff; border: 1px dashed #dbdbdb;margin-top: 10px;
                    -moz-box-shadow: 0px 1px 2px  #909090;-webkit-box-shadow: 0px 1px 2px  #909090;">
                    <div class="col-md-8">
                        <div style="width: 100%; height: 200px;padding-top: 30px; padding-left:20px; ">
                            <div>
                                <input id="idname" type="text" autocomplete="off"  style="outline:none;width: 75%; height: 40px" value="" placeholder="姓名， 请与登机证件姓名保持一致">
                                <span id="message1" style="font-size: 11px; margin-left: 1px; color:#e84118"></span>
                            </div>
                            <div style="">
                                <select style="height: 43px; outline:none;">
                                    <option>身份证</option>
                                    <option>身份证</option>
                                    <option>身份证</option>
                                </select>
                                &nbsp;&nbsp;
                                <input id="idnumber" type="text" style="width:50%; height: 40px;outline:none;" autocomplete="off"  value="" placeholder="登记证件号码">
                                <span id="message2" style="font-size: 11px; margin-left: 1px; color:#e84118"></span>
                            </div>
                            <div style="">
                                <select style="height: 43px;outline:none;">
                                    <option>中国区号 86</option>
                                    <option>中国区号 86</option>
                                    <option>中国区号 86</option>
                                </select>
                                &nbsp;&nbsp;
                                <input type="text" style="width:50%; height: 40px;outline:none;" autocomplete="off"  value="" placeholder="乘机人手机号码（选填）">
                            </div>
                            <div  style="margin-top: 10px"></div>
                        </div>
                    </div>
                    <div class="col-md-4" >
                        <div style="border-left: 2px dashed #dbdbdb; height: 170px;margin-top: 10px; float:left"></div>
                        <div>
                            <button type="button" class="btn-link" style="position: relative; float: right;outline:none; ">x删除</button>
                        </div>
                        <div style="float:left; margin-top:70px; margin-left: 40px;user-select:none;color: #ced6e0">
                            <span>订票无忧</span><br>
                            <span>价格保证，确保出行</span>
                        </div>
                    </div>
                </div>
                <div class="row" style="padding-top: 10px">
                    <div>
                        <button  type="button" style="color:#00a8ff; background-color:#f1f2f6;  border:1px solid #00a8ff" class="btn" id="tianjia" value="+">+ 添加乘客</button>
                    </div>
                </div>
                <div class="row">
                    <div>
                        <h3>联系人</h3>
                    </div>
                </div>
                <div class="row" style="background-color:#ffffff; margin-top: 10px;height: 70px;
                    -moz-box-shadow: 0px 1px 2px  #909090;-webkit-box-shadow: 0px 1px 2px  #909090;">
                    <div style="margin-top: 15px">
                        <select style="height: 43px;outline:none;">
                            <option>中国区号 86</option>
                            <option>中国区号 86</option>
                            <option>中国区号 86</option>
                        </select>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="text" id="myphone" style="width:30%; height: 40px;outline:none;" autocomplete="off"  value="" placeholder="登记证件手机号码">
                        <span id="message3" style="font-size: 11px; margin-left: 10px; color:#e84118">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        &nbsp;&nbsp;
                        <input type="email" style="width:30%; height: 40px;outline:none;" value="" placeholder="Email(选填,接受航班信息)">
                    </div>
                </div>
                <div class="row" style="margin-top: 20px">
                    <div>
                        <button class="btn" type="button" id="nextstep" style="width: 100%;background-color:#00a8ff; color:#ffffff ">下一步</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-4">
            <div class="row" style="background-color: #E7EDF0;margin-left: 5px;padding-top: 15px;
                 -moz-box-shadow: 0px 1px 2px  #909090;-webkit-box-shadow: 0px 1px 2px  #909090;">
                <div style="text-align:center; border-bottom: 1px solid #dbdbdb">
                    <p>12月30日&nbsp;&nbsp;周一&nbsp;&nbsp;北京-上海</p>
                    <p style="font-size: 12px;color: #747d8c">东方航空&nbsp;MU5534&nbsp;&nbsp;空客320(中型)&nbsp;&nbsp;公务舱</p>
                    <p style="font-size: 25px">
                        <span>7:30</span>
                        <span style="font-size: 12px;color: #747d8c;margin:0px 50px;">1h35m</span>
                        <span>9:15</span>
                    </p>
                    <p style="font-size: 13px">
                        <span>首都国际机场T2</span>
                        <span style="font-size: 12px;color: #747d8c;margin:0px 30px;">-------></span>
                        <span>浦东国际机场T1</span>
                    </p>
                </div>
                <div style="height:100px;padding: 20px 50px;border-bottom: 1px solid #dbdbdb">
                    <div style="float: left;width: 50%;font-size: 10px;">
                        <p>
                            <span>成人</span>
                            <span style="color: #747d8c">退改￥282起</span>
                            <span style="color: #747d8c">行李箱</span>
                        </p>
                        <p>
                            <span>机建</span>
                        </p>
                        <p>
                            <span>燃油税</span>
                        </p>
                    </div>
                    <div style="float: left;width: 50%;font-size: 10px; text-align: right">
                        <p>
                            <span>￥730</span>
                            <span style="color: #747d8c">x&nbsp;1</span>
                        </p>
                        <p>
                            <span>￥50</span>
                            <span style="color: #747d8c">x&nbsp;1</span>
                        </p>
                        <p>
                            <span>免费</span>
                        </p>
                    </div>
                </div>
                <div style="height:150px; padding: 20px 50px;">
                    <div style="float: right">
                        <span style="color: #ff4757; font-size: 30px">￥780</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="foot">
    <p>网站导航 | 宾馆索引 | 用户协议 | 关于携程 | 企业公民 | 诚聘英才 | 分销联盟 | 企业礼品卡采购 | 代理合作 | 广告业务 | 联系我们 | 返回旧版</p>
    <span>Copyright © 2019-2019, 第九组 All rights reserved.</span>
</div>


</body>
<script>



    $("#tianjia").click(function() {
        $(this).parent().parent().before("<div class=\"row\" style=\"background-color:#ffffff; border: 1px dashed #dbdbdb;margin-top: 10px;\n" +
            "                    -moz-box-shadow: 0px 1px 2px  #909090;-webkit-box-shadow: 0px 1px 2px  #909090;\">\n" +
            "                    <div class=\"col-md-8\">\n" +
            "                        <div style=\"width: 100%; height: 200px;padding-top: 30px; padding-left:20px; \">\n" +
            "                            <div>\n" +
            "                                <input type=\"text\" style=\"outline:none;width: 80%; height: 40px\" value=\"\" placeholder=\"姓名， 请与登机证件姓名保持一致\">\n" +
            "                            </div>\n" +
            "                            <div style=\"\">\n" +
            "                                <select style=\"height: 43px; outline:none;\">\n" +
            "                                    <option>身份证</option>\n" +
            "                                    <option>身份证</option>\n" +
            "                                    <option>身份证</option>\n" +
            "                                </select>\n" +
            "                                &nbsp;&nbsp;\n" +
            "                                <input type=\"text\" style=\"width:55%; height: 40px;outline:none;\" value=\"\" placeholder=\"登记证件号码\">\n" +
            "                            </div>\n" +
            "                            <div style=\"\">\n" +
            "                                <select style=\"height: 43px;outline:none;\">\n" +
            "                                    <option>中国区号 86</option>\n" +
            "                                    <option>中国区号 86</option>\n" +
            "                                    <option>中国区号 86</option>\n" +
            "                                </select>\n" +
            "                                &nbsp;&nbsp;\n" +
            "                                <input type=\"text\" style=\"width:55%; height: 40px;outline:none;\" value=\"\" placeholder=\"乘机人手机号码（选填）\">\n" +
            "                            </div>\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                    <div class=\"col-md-4\" >\n" +
            "                        <div style=\"border-left: 2px dashed #dbdbdb; height: 170px;margin-top: 10px; float:left\"></div>\n" +
            "                        <div>\n" +
            "                            <button type=\"button\" class=\"btn-link del\" style=\"position: relative; float: right;outline:none; \">x删除</button>\n" +
            "                        </div>\n" +
            "                        <div style=\"float:left; margin-top:70px; margin-left: 40px;\">\n" +
            "                            <span>订票无忧</span><br>\n" +
            "                            <span>价格保证，确保出行</span>\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                </div>");
        $(".del").click(function() {
            $(this).parent().parent().parent().removeAttr("style");
            $(this).parent().parent().parent().html("");
        } );
    } );

    $(".del").click(function() {
        $(this).parent().parent().parent().removeAttr("style");
        $(this).parent().parent().parent().html("");
    } );


    $("#tianjia").hover(function(){
        $(this).css({"background-color":"#00a8ff","color":"#f1f2f6"});
    },function(){
        $(this).css({"background-color":"#f1f2f6","color":"#00a8ff"});
    });


    $('#nextstep').click(function () {

        var idCard = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        var phoneRe= /^[1][3,4,5,7,8][0-9]{9}$/;

        if($("#idname").val() == "" || $.trim($("#idname").val()).length == 0){
            $("#message1").html(" 请输入用户名");
            return false; //如果验证不通过，则不执行后面
        }else if($("#idnumber").val() == "" || $.trim($("#idnumber").val()).length == 0){
            $("#message1").html("");
            $("#message2").html(" 请输入证件号码");
            return false; //如果验证不通过，则不执行后面
        }else if(idCard.test($("#idnumber").val())=== false){
            $("#message1").html("");
            $("#message2").html("请输入正确的证件号码");
            return false;
        }else if($("#myphone").val() == "" || $.trim($("#myphone").val()).length == 0){
            $("#message1").html("");
            $("#message2").html("");
            $("#message3").html(" 请输入手机号码");
        }else if(!phoneRe.test($("#myphone").val())){
            $("#message1").html("");
            $("#message2").html("");
            $("#message3").html(" 请输入正确的手机号码");
            return false;
        }else {
            //alert('pay1');
            //window.open('/pay');
            window.location.href = "/pay";
            //document.form.action = "/pay";
            //document.form.submit();
        }

    });
</script>
</html>